<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<link rel="stylesheet" href="css/override.css" />
		<link rel="stylesheet" href="css/comment.css" />
		<link rel="stylesheet" href="css/previewimg.css" />
		<style>
			.iconfont {
				font-size: 25px;
				color: #fff;
				float: right;
				margin-top: 10px;
				margin-right: 20px;
			}
			
			.img_area {
				width: 100%;
				height: 200px;
				position: relative;
			}
			
			.img_area img {
				width: 100%;
				height: 100%;
				border: 0;
			}
			
			.img_title {
				position: absolute;
				bottom: 15px;
				font-size: 16px;
				color: #fff;
				font-family: "微软雅黑";
				left: 20px;
			}
			
			.mui-btn {
				color: #fff;
				border: 1px solid #ff512f;
				background-color: #ff512f;
			}
			
			.price_area {
				padding-top: 15px;
				background-color: #fff;
				height: 70px;
			}
			
			.price_area span {
				float: left;
			}
			
			.price_area button {
				float: right;
				font-size: 17px;
				margin-right: 15px;
			}
			
			.price_area .price {
				color: #ff512f;
				font-size: 35px;
				margin-left: 15px;
				margin-top: 10px;
			}
			
			.price_area .deco_yuan {
				font-size: 15px;
				color: #ff512f;
				margin-top: 14px;
			}
			
			.price_area .old_price {
				margin-left: 20px;
				font-size: 15px;
				margin-top: 14px;
				color: #8f8f94;
			}
			
			.desc_area {
				background-color: #fff;
				border-top: 1px solid #c8c7cc;
				padding: 20px 10px 0px;
			}
			
			.desc_area p {
				font-size: 15px;
			}
			
			.seller_info {
				margin-left: 20px;
			}
			
			
		
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">热门评论</h1>
		</header>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul class="mui-table-view mui-table-view-chevron" id="commentlist">

				</ul>
			</div>

		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/app.js" ></script>
		<script src="js/getcomment.js"></script>
		<script type="text/javascript" src="js/mui.zoom.js" ></script>
		<script type="text/javascript" src="js/mui.previewimage.js" ></script>
		<script type="text/javascript">
			var count = 5; //每次刷新的条数
			var page = 1; //页码
			var self = null; //当前页面对象
			var commentList = document.getElementById("commentlist");
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						auto: true, //可选,默认false.自动上拉加载一次
						contentrefresh: "正在加载评论...",
						contentnomore: '没有更多评论了',
						callback: getCommentDatas
					}
				}
			});
			mui.plusReady(function() {
				self = plus.webview.currentWebview();
			});

			var first = true;

			function getCommentDatas() {
				var url=api_url.getCommmentUrl.format(self.dealid,count,page);
				console.log(url);
				//从服务器读取评论
				mui.ajax(url, {
					type: "GET",
					dataType: "json",
					timeout: 2000,
					success: function(datas) {
						console.log(JSON.stringify(datas));
						if(datas.length == 0) {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
						} else {
							//构建新的html片断
							commentList.appendChild(createCommentFragment(datas));
							page++;
							mui('#pullrefresh').pullRefresh().endPullupToRefresh();
							mui.previewImage();
						}
						if(first) {
							//显示当前页面
							self.show("pop-in", 200);
							//关闭等待框
							plus.nativeUI.closeWaiting();
							first = !first;
						}
					}
				});
			}
			
		</script>
	</body>

</html>